<template>
    <div class="m-navbar" id="m-navbar">
        <div class="g-group" v-for="(item, index) in titleArr" :class="{activeTitle: changeStyle(item)}">
            <navbar-item>
                <div class="navbar-title" slot="navbarTitle">
                    <i class="el-icon-fa-bars titleIcon"></i>
                    <span class="u-title">{{item.name}}</span>
                </div>
                <template v-for="(subitem, subindex) in item.child">
                    <div slot="navbarLink">
                        <router-link :to="subitem.staticUrl" class="ele-link" active-class="activeTab" >{{subitem.name}}</router-link>
                    </div>
                </template>
            </navbar-item>
        </div>
    </div>
</template>

<script>
import {
    mapGetters,
    mapActions
} from "vuex";
import navbarItem from "./navbarItem";

export default {
    data () {
        return {
            currentPathBool: false,
            titleArr: []
        };
    },
    methods: {
        changeStyle (item) {
            if(!item.hasOwnProperty('child')){
                return;
            }
            let links = item.child.map((ele) => {
                return ele.staticUrl;
            });
            let bool = links.indexOf(this.$route.path) !== -1;
            return bool;
        },
        handleSelect (key, keyPath) {
            // console.log(key, keyPath);
        },
        buildNarbar () {
            // let userAuthList = this.userAuth?this.userAuth:[];
            let userAuthList = JSON.parse(sessionStorage.getItem('list'))?JSON.parse(sessionStorage.getItem('list')):[];
            userAuthList.forEach(ele => {
                if(ele.pid === '0000'){
                    this.titleArr.push(ele);
                }
            });
            this.titleArr.forEach((ele) => {
                let subTitle = [];
                userAuthList.forEach(item => {
                    if(String(item.pid) === String(ele.code)){
                        subTitle.push(item);
                    }
                });
                ele.child = subTitle;
            });
        }
    },
    watch: {
        "$route": {
            handler: function (to, from) {
               // console.log("to", to);
            },
            immediate: true
        }
    },
    mounted () {
        this.buildNarbar();
    },
    updated () {
        // console.log('updated');
    },
    created () {
        // console.log(this.userAuth);
        // console.log('created');
        // this.buildNarbar();
    },
    computed: {
        ...mapGetters([ // 加载从getters上绑定的状态值
            "userAuth"
        ])
    },
    components: {
        navbarItem
    }
};
</script>

<style lang="scss" scoped>
.m-navbar {
    margin-top: 10px;
    padding-bottom: 50px;
    .g-group:nth-of-type(n+2){
        margin-top: 20px;
    }
}
.ele-link {
    font-size: 14px;
    box-sizing: border-box;
    color: inherit;
    text-decoration: none;
    display: block;
    height: 45px;
    line-height: 45px;
    width: 100%;
    padding-left: 32px;
    border-left: 5px solid transparent;
    color: #364149;
    transition: all .2s;
    &:hover{
        border-left: 5px solid #20a0ff;
        background-color: #eef1f6;
        color: #20a0ff;
    }
}

.navbar-title {
    padding-left: 15px;
    height: 45px;
    line-height: 45px;
    cursor: pointer;
    user-select: none;
    [class^="el-icon-fa"] {
        text-align: center;
        width: 18px;
        color: #7f8c8d;
        &:before {
            font-size: 14px;
        }
    }
    .u-title {
        font-size: 14px;
        color: #7f8c8d;
    }
    &:hover {
        .u-title{
            color: #20a0ff;
        }
        i {
            color: #20a0ff;
        }
    }
}

.activeTitle {
    .u-title{
        color: #20a0ff;
    }
    i.titleIcon {
        color: #20a0ff;
    }
}

.activeTab{
    border-left: 5px solid #20a0ff;
    background-color: #eef1f6;
    color: #20a0ff;
    box-shadow: 0px 0px 5px 0px #d7d7d7;
}
.ps__scrollbar-y-rail {
    position: absolute;
    width: 20px;
    right: 0;
    background-color: #ddd;
}
.ps__scrollbar-y {
    position: relative;
    background-color: #aaa;
}

</style>
